<template>
    <div class="store-container">
        <Search @search="onSearch" @reset="onReset" />
        <Table :data="state.list" @open="onOpen" />
        <div class="pagination zw-pagination">
            <Pagination
                :total="state.totalCount"
                :page-size="params.perPage"
                :current-page="params.page"
                @size-change="onSizeChange"
                @pageChange="onPageChange" />
        </div>
    </div>
</template>

<script setup name="store">
import Search from './search.vue';
import Table from './table.vue';
import Pagination from '@/components/Pagination.vue';
import { reactive } from 'vue';
import request from '@/request';
import { ElMessage } from 'element-plus';

const params = reactive({
    page: 1,
    perPage: 10
});
const state = reactive({
    list: [],
    totalCount: 0
});
const getList = async () => {
    const { data } = await request('tenantList', params);
    // const { data } = await request('tenantList', { page: 1, perPage: 10 });
    state.list = data.list || [];
    state.totalCount = data.totalCount || 0;
};

const onSizeChange = v => {
    params.perPage = v;
    getList();
};
const onPageChange = v => {
    params.page = v;
    getList();
};
const onSearch = v => {
    Object.assign(params, v);
    getList();
};
const onReset = v => {
    Object.assign(params, v);
    getList();
};

/**
 * 开关店
 * @param {*} row
 */
const onOpen = async row => {
    const { id, status } = row;
    const params = {
        tenantId: id,
        isEnable: status === 1 ? 2 : 1
    };
    await request('tenantDisable', params);
    const mssssage = status === 1 ? '禁用成功' : '启用成功';
    ElMessage.success(mssssage);
    getList();
};
</script>
<style lang="scss" scoped>
.zw-el-form {
    margin-bottom: 16px;
    background-color: #f9f9f9;
    border: 1px solid #eaeaea;
    padding: 12px;
}
.store-container {
    .default {
        position: relative;
        padding-left: 16px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        display: block;
        &::after {
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #cccccc;
            border-radius: 4px;
            width: 8px;
            height: 8px;
        }
    }
    .authed::after {
        background: #32d1ad;
    }
    .auth::after {
        background: #ffd500;
    }
    .fail::after {
        background: #ff4a1a;
    }
    :deep(.el-dialog) {
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
            0px 6px 16px -8px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        margin: 0;
    }
    :deep {
        /* .el-table {
                color: #33302d;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 14px;
                font-weight: 400;
                .el-button--small {
                    color: #33302d;
                    border: 1px solid #eaeaea;

                    font-family: PingFangSC-Regular, PingFang SC;
                    font-size: 12px;
                    font-weight: 400;
                }
                .el-button--small + .el-button--small {
                    margin-left: 8px;
                }
            }
            .el-tabs__nav-wrap {
                margin-bottom: -15px;
                &::after {
                    height: 0;
                }
            }
            .el-table .el-table__cell {
                padding: 20px 0;
            } */

        .el-table th.el-table__cell {
            color: #33302d;

            font-family: PingFangSC-Medium, PingFang SC;
            font-size: 14px;
            font-weight: 500;
        }
    }
}
.store-container :deep(.flex) {
    display: flex;
}
.store-container :deep(.edit) {
    margin-right: 17px;
    font-size: 14px;
    color: #fb9f5f;
    cursor: pointer;
}
.empty-table {
    padding: 50px 0;
    min-height: 300px;
    text-align: center;
    vertical: center;
    img {
        width: 50%;
    }
    .empty-content {
        height: 20px;
        font-size: 13px;
        color: #969696;
        line-height: 20px;
    }
}
</style>
